<template>
  <Main>
    <template #table>
      <GTable :columns="columns" :loading="loading" :data="tableData" :total="total" @sizeChange="sizeChange" @currentChange="currentChange" @prevClick="prevClick" @nextClick="nextClick" >
        <template #status="{ row }">
          <span v-if="row.status === 1">正常</span>
          <span v-else>异常</span>
        </template>
<!--        编辑-->
        <template #general = "{ row }">
          <el-button size="small" round type="primary" @click="editEmployee(row)">编辑</el-button>
          <el-button size="small" round type="danger" @click="deleteEmployee(row)">删除</el-button>
        </template>
      </GTable>
    </template>
    <template #main-search>
      <el-input
          style="width: 200px"
          v-model="searchName"
          size="large"
          placeholder="请输入员工名称"
          @keyup.enter="searchTableData"
          :prefix-icon="Search"
      />
    </template>
    <template #main-action>
      <el-button :icon="Plus" @click="addEmployee" type="warning" round>添加员工</el-button>
    </template>
  </Main>
</template>

<script setup>
import { ref, watch } from 'vue';
import { Search, Plus } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useEmployeeData } from './useEmployeeData';

const searchName = ref(null);
const {
  columns, tableData, sizeChange, currentChange, prevClick, nextClick, getTableData, deleteEmployee, total,loading,
} = useEmployeeData(searchName);
const router = useRouter();

function addEmployee() {
  router.push({ path: 'userManagement/detail', query: { page: 'add' } });
}
function editEmployee(row) {
  router.push({ path: 'userManagement/detail', query: { page: 'edit', id: row.id } });
}
watch(router.currentRoute, (newValue) => {
  newValue.name === 'userManagement' && !newValue.query.page && getTableData();
});
function searchTableData() {
  getTableData({ name: searchName.value });
}
</script>

<style scoped>

</style>
